<!--
 * @Description: 角色列表
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-10-30 14:28:39
 * @LastEditors: 尹鑫
 * @LastEditTime: 2020-12-26 11:07:28
-->

<template>
  <div class="mainbox">
    <adminTable
      ref="refTable"
      :other-show="true"
      :searchs="searchs"
      :api-fun="apiFun"
      :table-column="tableColumn"
      :table-data.sync="tableData"
      @add-list="addClick"
    >
      <!-- 表格操作 -->
      <template slot="operate" slot-scope="scope">
        <template v-if="isAdmin">
          <el-button type="text" size="small" @click="editClick(scope.value)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.value)">删除</el-button>
        </template>
        <template v-else-if="scope.value.roleName!=='超级管理员'">
          <el-button type="text" size="small" @click="editClick(scope.value)">编辑</el-button>
          <el-button type="text" size="small" @click="deleteClick(scope.value)">删除</el-button>
        </template>
      </template>
    </adminTable>
    <!-- 添加编辑组件 -->
    <RoleAddEdit :show.sync="dialogFormVisible" :form-data.sync="formData" @refresh="refreshList" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 组件引入
import adminTable from '@/components/admin/admin-table'
import RoleAddEdit from './components/RoleAddEdit'
// 接口
import { roleAll, roleDelete } from '@/api/system'
// 页面配置
import { roleClumen, roleSearchs } from './count.js'
// 公共方法
import { openMessageBox } from '@/utils/utils'
export default {
  components: {
    adminTable,
    RoleAddEdit
  },
  data() {
    return {
      tableColumn: roleClumen,
      tableData: [],
      searchs: roleSearchs,
      apiFun: roleAll,
      dialogFormVisible: false,
      formData: {
        genre: 'add',
        roleDescribe: '',
        roleId: '',
        roleName: ''
      },
      isAdmin: JSON.parse(localStorage.getItem('userInfo')).userId === '000000'
    }
  },
  computed: {
    ...mapGetters([
      'currentUserInfo'
    ])
  },
  methods: {
    // 编辑设置表单数据
    editClick(e) {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'edit',
        ...e
      }
    },
    // 添加清空表单数据
    addClick() {
      this.dialogFormVisible = true
      this.formData = {
        genre: 'add',
        roleId: '',
        roleName: '',
        roleDescribe: ''
      }
    },
    // 删除点击弹出提示
    deleteClick(row) {
      openMessageBox({
        content: '删除数据后，将不可恢复，是否确认？',
        title: '删除数据'
      }, (boole) => {
        if (boole) {
          // 删除角色接口请求
          roleDelete({ roleId: row.roleId }).then((res) => {
            this.$message({ message: '删除成功', type: 'success' })
            this.$refs.refTable.getList()
          })
        }
      })
    },
    refreshList() {
      this.$refs.refTable.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
